<template>
  <div class="detailComment">
    <div v-for="(item, index) in commentList" :key="index" class="commentItem">
      <div class="comment_rate_name">
        <span class="name">{{item.comment_username}}</span>
        <el-rate v-model="item.comment_star" disabled :colors="rateArray"></el-rate>
      </div>
      <p class="comment_attributes_time"><span>{{item.attributes}}</span><span>{{item.comment_time}}</span> </p>
      <p class="commentTitle">{{item.comment_title}}</p>
      <p class="commentContent">{{item.comment_content}}</p>

      <div v-if="item.httpImage&& item.httpImage.length> 0" class="image_container">
        <p class="image" :style="'background-image: url('+img+')'" v-for="img in item.httpImage" :key="img" ></p>
      </div>

    </div>
    <div class="product_detail_btn">
      <i class="iconfont icon-Share_actived" @click="isShareDialogShow"></i>
      <el-button type="search" v-if="amazon_buy_link" @click="openLink(amazon_buy_link)">{{$t('DEFAULT.BUYONAMAZON')}}</el-button>
      <el-button v-else>{{$t('DEFAULT.NOSALES')}}</el-button>
    </div>
    <ShareDialog v-show="isShare" :show="isShare" @closeDialog="isShareDialogShow" :product="product" ></ShareDialog>

  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import { productCommentList }  from '@/api/product.js'
import { productAmazonButtonClickFunc } from '@/utils/kanban.js'
import { getScrollTop, getWindowHeight, getScrollHeight } from '@/utils/index.js'
import { ShareDialog} from './components'

export default {
  data () {
    return {
      page_size: 10,
      page: 1,
      commentLoading: false,
      commentList: [],
      rateArray: ['#FEBD69', '#FEBD69', '#FEBD69'],
      amazon_buy_link: '',
      isShare: false,
      product: ''
    }
  },
  components: { ShareDialog },
  
  mounted (){
    let that = this
    this.getCommentList()
    this.amazon_buy_link = this.$route.query.amazon_buy_link
    this.product = {
      product_model_name : this.$route.params.name,
      title: this.$route.query.title
    }
    this.$nextTick(() => {
      window.onscroll = function(){
        if(getScrollTop() + getWindowHeight() == getScrollHeight()){
          if(!this.commentLoading){
            that.page+=1
            that.getCommentList()
          }

        }
      };
    })
  },
  watch: {
    curSite: function() {
      this.getCommentList()
    }
  },
  computed: {
   ...mapGetters(['curSite', 'isPhone']),
  },
  methods: {
    isShareDialogShow (){ // 分享弹窗
      this.isShare = !this.isShare
    },
    openLink (link) {
      let url = link
      if (url.indexOf('http')  == -1){
        url = 'http://' +link
      }
      productAmazonButtonClickFunc(this.product.product_model_name)
      window.open(url, '_blank')
    },
    getCommentList () {
      this.commentLoading = true
       let params = {
        filter:{},
        op: {},
        page_size: this.page_size,
        page: this.page,
      }
      let product_model_name = this.$route.params.name
      if(product_model_name){
        params.filter.product_model_name = product_model_name,
        params.op.product_model_name = '='
      }
  
      let site_id = this.curSite.id
      if(site_id){
        params.filter.site_id = site_id,
        params.op.site_id = '='
      }
      
      productCommentList(params).then(res=>{
        let list = res.data.data
        for(let i = 0; i< list.length; i++){
          list[i].comment_star = parseInt(list[i].comment_star)
        }
        if(this.isPhone && params.page > 1) {
          this.commentList = this.commentList.concat(list)
        } else {
          this.commentList = list
        }
        if(list.length == 0){
          console.log('没有了')
        } else {
          this.comment_total = res.data.total
          this.page = res.data.current_page
          this.commentLoading = false
        }
      
      })
    },
  }

}
</script>

<style lang="scss">
@import '@/styles/product/detailComment.scss';

</style>